<template>
  <view class="container">
    <view class="header">
      <view class="header-user" @click="gotoSetting">
        <image :src="userInfo.image?  baseUrl + userInfo.image : '/static/images/Ellipse66@2x.png'" mode="">
        </image>
        <view class="user-info" @click="gotoSetting">
          <text>{{userInfo.nickname || '用户'}}</text>
          <text>{{userInfo.phone}}</text>
        </view>
      </view>
    </view>
    <view class="gui-list gui-margin-top gui-padding-x gui-bg-white">
      <view class="gui-list-items" @click="gotoIssueHistory">
        <image class="left-icon" src="/static/images/Group48097756@2x.png" mode=""></image>
        <view class="gui-list-body  gui-border-b">
          <view class="gui-list-title">
            <text class="gui-list-title-text">发布记录</text>
          </view>
        </view>
        <text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
      </view>
      <!-- <view class="gui-list-items" @click="gotoContactHistory">
        <image class="left-icon" src="/static/images/Group48097757@2x.png" mode=""></image>
        <view class="gui-list-body gui-border-b">
          <view class="gui-list-title">
            <text class="gui-list-title-text">联系记录</text>
          </view>
        </view>
        <text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
      </view> -->
      <view class="gui-list-items" @click="gotoAccountDetail">
        <image class="left-icon" src="/static/images/Group48097536@2x.png" mode=""></image>
        <view class="gui-list-body gui-border-b">
          <view class="gui-list-title">
            <text class="gui-list-title-text">账单明细</text>
          </view>
        </view>
        <text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
      </view>
      <view class="gui-list-items" @click="gotoRealAuth">
        <image class="left-icon" src="/static/images/Group48097536@2x.png" mode=""></image>
        <view class="gui-list-body gui-border-b">
          <view class="gui-list-title">
            <text class="gui-list-title-text">实名认证</text>
          </view>
        </view>
        <text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
      </view>
      <!-- <view class="gui-list-items" @click="gotoDriver">
        <image class="left-icon" src="/static/images/Group48097536@2x.png" mode=""></image>
        <view class="gui-list-body gui-border-b">
          <view class="gui-list-title">
            <text class="gui-list-title-text">司机端</text>
          </view>
        </view>
        <text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
      </view> -->
    </view>
  </view>
</template>
<script>
  import graceJS from '@/Grace6/js/grace.js';
  export default {
    data() {
      return {
        baseUrl: uni.gRequest.file,
        userInfo: {}
      }
    },
    // onShow() {
    //   var user = uni.gRequest.checkLogin();
    //   var self = this;
    //   if (user) {
    //     this.userInfo = user;

    //     // uni.gRequest.get('shop/list', {
    //     //   userId: user.userId
    //     // }).then(result => {
    //     //   // console.log('result', result);
    //     //   // self.shop_list = result.rows;
    //     //   self.shop_list = result.data;
    //     // });
    //   }
    // },
    async onShow() {
      const user = uni.getStorageSync('userInfo')
      // console.log(user);
      if (!user.userId) {
        uni.navigateTo({
          url: "/pages/login/wchatLogin"
        })
      }
      // var user = await uni.gRequest.checkLogin();
      if (user.userId) {
        const res = await uni.gRequest.get(`/app/user/info/${user.userId}`)
        this.userInfo = {
          ...user,
          ...res.data,
        }


        uni.setStorageSync('userInfo', this.userInfo)
      }
    },
    methods: {
      gotoSetting() {
        uni.navigateTo({
          url: "/pages/user/settings"
        })
      },
      // 上传图片
      async uploadImage() {
        const res = await uni.chooseMedia({
          count: 1,
          mediaType: 'image',
        })
        wx.uploadFile({
          url: this.baseUrl + '/common/upload',
          filePath: res.tempFiles[0].tempFilePath,
          name: 'file',
          header: {
            Authorization: 'Bearer ' + this.userInfo.token,
          },
          success: async (result) => {
            // 处理返回的 json 数据
            const data = JSON.parse(result.data)
            // console.log(111, data);
            // 判断接口是否调用成功
            if (data.code !== 200) {
              return wx.showToast({
                icon: 'none',
                title: '上传图片失败!'
              })
            }
            // 渲染数据
            this.userInfo.image = data.fileName
            // console.log(this.form.idcardFrontUrl);
            const res = await uni.gRequest.get('/app/user/edit/image', {
              id: this.userInfo.userId,
              img: data.fileName
            })
          },
        })
      },
      async gotoDriver() {
        const res = await uni.gRequest.post('/app/user/edit', {
          userClass: 2
        })
        uni.navigateTo({
          url: "/pages/driver_port/index?i=1"
        })
      },
      gotoRealAuth() {
        uni.navigateTo({
          url: "/pages/RealAuth/RealAuth"
        })
      },
      gotoAccountDetail() {
        uni.navigateTo({
          url: "/pages/AccountDetail/AccountDetail"
        })
      },
      gotoContactHistory() {
        uni.navigateTo({
          url: "/pages/ContactHistory/ContactHistory?isClient" + this.isClient
        })
      },
      gotoIssueHistory() {
        uni.navigateTo({
          url: "/pages/IssueHistory/IssueHistory"
        })
      },
    }
  }
</script>
<style lang="scss">
  page {
    width: 100%;
    height: 100%;
    background-color: #fff;
  }

  .left-icon {
    width: 32rpx;
    height: 32rpx;
  }

  .container {
    width: 100%;
  }

  .header {
    height: 414rpx;
    // background: #347DFD;
    background: #fe7f08 url('/static/images/Snipaste.png') no-repeat center/100% 100%;
    position: relative;

    .header-user {
      display: flex;
      align-items: center;
      position: absolute;
      bottom: 120rpx;
      left: 20rpx;

      image {
        width: 140rpx;
        height: 140rpx;
        border-radius: 50%;
      }

      .user-info {
        margin-left: 16rpx;
        display: flex;
        justify-content: center;
        flex-direction: column;
        color: white;
        font-size: 30rpx;

        text:first-child {
          font-size: 48rpx;
          margin-bottom: 14rpx;
        }
      }
    }
  }
</style>
